/**
 * 图表
 * 数据格式示例：
 *  $scope.chartData = {
                    title: '各小区缴费状况分析',
                    data: [
                        {
                            name: '代缴费用',
                            data: [
                                {value: 120, name: '华发新城一期',url:'http://www.baidu.com'},
                                {value: 130, name: '华发新城二期'},
                                {value: 420, name: '华发新城三期'},
                                {value: 300, name: '华发新城四期'}
                            ]
                        },
                        {
                            name: '已缴费用',
                            data: [
                                {value: 400, name: '华发新城一期'},
                                {value: 500, name: '华发新城二期'},
                                {value: 600, name: '华发新城三期'},
                                {value: 300, name: '华发新城四期'}
                            ]
                        }
                    ]
                };
 * author liuxiaotang 2016-10-28
 */

define(["app", 'echarts'], function (app, echarts) {

    var deps = ["$timeout"];

    /**
     * 指令主体 柱状图
     * html模板示例：<div data-echarts-bar data-ng-model="chartData" style="width: 100%;height:400px;"></div>
     */
    function echartsBar ($timeout) {
        return {
            restrict: 'AE',
            scope: {
                ngModel: '=ngModel',
                chartsType: '@chartsType'
            },
            controller: ["$scope", function () {
            }],
            link: function (scope, element, attrs, controller) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(element[0]);
                var legendData = [];
                var yAxisArr = [];
                angular.forEach(scope.ngModel.data, function (v, k) {
                    legendData.push(v.name);
                    v.type = 'bar';
                    v.stack = true;
                    v.label = {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    }
                });
                angular.forEach(scope.ngModel.data[0].data, function (v, k) {
                    yAxisArr.push(v.name);
                });
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: scope.ngModel.title,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    toolbox: {
                        y: '20%',
                        orient: 'vertical',
                        feature: {
                            magicType: {
                                type: ['stack', 'tiled']
                            },
                            saveAsImage: {
                                pixelRatio: 2
                            }
                        }
                    },
                    grid: {
//                        show:true,
                        top: '20%',
                        containLabel: true
                    },
                    legend: {
                        data: legendData,
                        top: '10%',
                        right: 0
                    },
                    xAxis: {},
                    yAxis: {
                        data: yAxisArr
                    },
                    series: scope.ngModel.data
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

                myChart.on('click', function (param) {
                    var paramData = param.data;
                    if (paramData.url != null && paramData.url != '') {
                        location.href = paramData.url;
                    }
                });

                scope.$watch('ngModel', function () {
                    myChart.setOption(option);
                }, true);

                window.onresize = function () {
                    angular.forEach(document.querySelectorAll('div.ng-isolate-scope'), function (v, k) {
                        echarts.getInstanceByDom(v).resize();
                    })
                };
            }
        };
    }

    echartsBar.$inject = deps;
    app.lazy.directive("echartsBar", echartsBar);

    /**
     * 指令主体 扇形图
     * html模板示例：<div data-echarts-pie data-ng-model="chartData3" data-sub-model="chartData" style="width: 100%;height:400px;"></div>
     * 有 data-sub-model 则为嵌套扇形图，无则普通扇形图
     */
    function echartsPie ($timeout) {
        return {
            restrict: 'AE',
            scope: {
                ngModel: '=ngModel',
                subModel: '=subModel'
            },
            controller: ["$scope", function () {
            }],
            link: function (scope, element, attrs, controller) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(element[0]);
                var legendData = [];
                angular.forEach(scope.ngModel.data[0].data, function (v, k) {
                    legendData.push(v.name);
                });
                if (hasSubModel()) {
                    angular.forEach(scope.subModel.data[0].data, function (v, k) {
                        legendData.push(v.name);
                    });
                }
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: scope.ngModel.title,
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        top: '20%',
                        left: '5%',
                        data: legendData,
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {
                                pixelRatio: 2
                            }
                        }
                    },
                    series: [
                        {
                            type: 'pie',
                            center: ['55%', '60%'],
                            radius: hasSubModel() ? ['0', '40%'] : ['0', '60%'],
                            label: {
                                normal: {
                                    position: hasSubModel() ? 'inner' : 'outside'
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: hasSubModel() ? false : true
                                }
                            },
                            selectedMode: 'single',
                            data: scope.ngModel.data[0].data
                        },
                        {
                            type: 'pie',
                            center: ['55%', '60%'],
                            radius: ['50%', '65%'],
                            selectedMode: 'single',
                            data: hasSubModel() ? scope.subModel.data[0].data : ''
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

                function hasSubModel () {
                    return (typeof scope.subModel === 'object' && (scope.subModel != null || scope.subModel != {})) ? 1 : 0;
                }

                myChart.on('click', function (param) {
                    var paramData = param.data;
                    if (paramData.url != null && paramData.url != '') {
                        location.href = paramData.url;
                    }
                });

                scope.$watch('ngModel', function () {
                    myChart.setOption(option);
                }, true);
                scope.$watch('subModel', function () {
                    myChart.setOption(option);
                }, true);
                window.onresize = function () {
                    angular.forEach(document.querySelectorAll('div.ng-isolate-scope'), function (v, k) {
                        echarts.getInstanceByDom(v).resize();
                    })
                }
            }
        };
    }

    echartsPie.$inject = deps;
    app.lazy.directive("echartsPie", echartsPie);
});